<template>
  <div>
    <a-modal :visible="visible" title="设置标签" @before-open="open" @ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <a-button type="text" @click="detail.visible = true">管理标签</a-button>

      <a-table size="mini" :loading="loading" style="margin-top: 10px" class="table-single-line" row-key="code" v-model:selected-keys="ids" :data="tagList" :row-selection="rowSelection" :pagination="false" :scroll="{ y: '300px' }">
        <template #columns>
          <a-table-column title="颜色" #cell="{ record }" align="center" :width="80">
            <span class="color" :style="{ backgroundColor: record.color }"></span>
          </a-table-column>
          <a-table-column title="标签名字" #cell="{ record }" align="center" :width="200">
            <span>{{ record.name }}</span>
          </a-table-column>
        </template>
      </a-table>

      <Detail ref="detail" @save="getTagList" />
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { tagListByParam } from '@/api/product'
  import { Message } from '@arco-design/web-vue'
  import Detail from './tagDetail.vue'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['list'],
    components: { Detail },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const detail = ref()

      const data: any = reactive({
        curPage: '1',
        tagList: [],

        rowSelection: {
          width: '40',
          type: 'checkbox',
          showCheckedAll: true,
        },
        ids: [],
        newTagList: [],
        loading: false,
      })

      const open = () => {
        getTagList()
        if (props.list[0]) {
          data.ids = props.list.map((e: any) => e.code)
        }
      }
      const handleOk = () => {
        // if (data.ids.length <= 0) {
        //   return Message.error('请先选择标签')
        // }
        let arr: any = []
        data.ids.forEach((e: any) => {
          let item: any = data.tagList.find((el: any) => e == el.code)
          arr.push(item)
        })
        data.ids = []
        emit('save', arr)
        visible.value = false
      }
      const handleCancel = () => {
        data.ids = []
        visible.value = false
      }

      const getTagList = async () => {
        data.loading = true
        const res = await tagListByParam({ source: 'PRODUCT' })
        data.tagList = res?.data
        data.loading = false
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        detail,
        getTagList,
      }
    },
  })
</script>

<style lang="less" scoped>
  .title {
    margin: 5px 0;
    color: #ababab;
  }

  .tag {
    color: #2c4358;
    margin: 10px 10px 10px 0;
  }

  .color {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
</style>
